import React from 'react';
import {Form, Select, Input, Row, Col, DatePicker, Button, Modal, Table, Collapse} from 'antd'
import ManagerBody from '../../components/ManagerBody';
import { FetchAPI } from '../../utils/fetch-middleware'
import TableDetail from './detail/StudentsDetail';

const Panel = Collapse.Panel;
import { setTitle} from '../../common/PublicComponent';
//RCS_NEW_MANAGER_MERCHAT
const Option = Select.Option;

@setTitle('学生管理-学籍查询','API_GET_STUDENTS_MODELS')
@Form.create()
export default class Students extends React.Component {

    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }

    onDetailCancel = () => {
        this.setState({
            detail: false,
        });
    }

    handleEdit (sendValue) {

    }

    handleDetail = (record) => {
        this.setState({
            detail: true,
            currentData: record || {},
        });
    }

    handleDel (sendValue) {
        const confirmed = confirm(`确定要执行删除操作吗？`);
        if (confirmed) {
            FetchAPI('/api/student/delete', 'POST', sendValue.uuid).then(result => {
                if(result.code === 'ACM0202'){
                    Modal.success({
                        title: result.code,
                        content: '删除成功～',
                    });
                } else {
                    Modal.warning({
                        title: result.code,
                        content: result.message,
                    });
                }

            }, err => {
                Modal.error({
                    title: 'WRONG',
                    content: '系统内部错误，请联系管理员',
                });
            });
        }
    }

    state = {
        pageNum: 1,
        pageSize: 10,
        total: 10,
        startHitTime: '',
        endHitTime:'',
        visible: false,
        tcdListData: [],
        visible: false
    }

    columns = [{
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
    }, {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
        render: text => text === '1' ? '男' : '女',
    },{
        title: '学号',
        dataIndex: 'acNo',
        key: 'acNo',
    }, {
        title: '班级',
        dataIndex: 'className',
        key: 'className',
    }, {
        title: '手机号',
        dataIndex: 'phone',
        key: 'phone',
    }, {
        title: '现在状态',
        dataIndex: 'status',
        key: 'status',
        render: text => {
            let result = '';
            if (text === '0') {
                result = '待报道';
            } else if (text === '1') {
                result = '在读';
            } else if (text === '2') {
                result = '休学';
            } else if (text === '3') {
                result = '退学';
            } else if (text === '4') {
                result = '毕业';
            }
            return result;
        },
    }, {
        title: '级别',
        dataIndex: 'classLevel',
        key: 'classLevel',
    },{
        title: '注册日期',
        dataIndex: 'createDate',
        key: 'createDate',
        render: text  => text ? new Date(text).toLocaleDateString() : '2018/3/22',
    }, {
        title: '操作',
        dataIndex: '',
        key: 'operation',
        render: (text, record, index) => <div><a href="#" name="detail" onClick={() => this.handleDetail(record)}>编辑</a>
            &nbsp;&nbsp;&nbsp;<a href="#" name="delete" onClick={() => this.handleDel(record)}>删除</a></div>
    },]

    success(message) {
        Modal.success({
            title: '系统提示',
            content: message,
        });
    }

    warning(message) {
        Modal.warning({
            title: '系统提示',
            content: message,
        });
    }

    error() {
        Modal.error({
            title: '系统警告',
            content: '系统内部错误，请联系管理员～',
        });
    }

    // 弹出框取消
    onCancel = () => {
        this.setState({ visible: false });
    }


    componentWillMount() {
    }

    serachData = (para) => {
        const formData = this.props.form.getFieldsValue();
        const {pageNum, pageSize} = para;

        FetchAPI(`/api/student/findAll?pageNum=${pageNum}&pageSize=${pageSize}`, 'POST', formData).then((result) => {
            debugger;
            if (result.code === 'ACM0010') {
                this.setState({
                    tcdListData: result.data.list.map(item => {
                        item.key = item.uuid;
                        // item.status = item.status === '1' ? '可用' : '不可用';
                        return item;
                    })
                });
                // const {total, current, size} = result;
                let total = result.data.total;
                let current = result.data.number;
                let size = result.data.size;
                this.setState({total: total, pageNum: current, pageSize: size})
            } else {
                this.warning(result.message)
            }
        }, (err) => {
            this.error()
        });
    }

    // 添加学生信息
    addTcd = (para) => {
        // let sendValue = JSON.parse(JSON.stringify(this.state.validDataSource));
        let sendValue = this.props.form.getFieldsValue();
        debugger;
        console.log(sendValue, 'values');
        FetchAPI('/api/student/add', 'POST', sendValue).then(result => {
            if(result.code === 'ACM0008'){
                Modal.success({
                    title: result.code,
                    content: '添加成功～',
                });
            } else {
                Modal.warning({
                    title: result.code,
                    content: result.message,
                });
            }

        }, err => {
            Modal.error({
                title: 'WRONG',
                content: '系统内部错误，请联系管理员',
            });
        });
    }

    handleSubmit = (e) => {
        const {pageSize,} = this.state;
        this.setState({pageNum: 1})
        const params = {
            pageNum: 1,
            pageSize,
        }
        this.serachData(params);
    }

    componentDidMount() {
        /** 初始化数据 */
        this.handleSubmit();
    }

    showAddModal = () => {
        this.setState({
            visible: true,
        })
    }

    download = () => {
        let sendValue = this.props.form.getFieldsValue();
        debugger;
        // console.log(sendValue, 'values');
        FetchAPI('/api/student/export', 'POST',sendValue).then(result  => result.blob())
            .then(blob => {
                var url = window.URL.createObjectURL(blob);
                var a = document.createElement('a');
                a.href = url;
                a.download = "detail.xls";
                a.click();
            });
    }

    handleOk = (e) => {
        console.log(e);
        this.addTcd();
        this.setState({
            visible: false,
        });
        //重置
        this.props.form.resetFields();

    }

    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }

    render() {

        let self = this;
        const {tcdListData, detail, currentData} = this.state;
        const {getFieldDecorator} = this.props.form;
        const layout = {
            xs: 24,
            sm: 12,
            md: 6,
        }
        const customPanelStyle = {
            // background: '#f7f7f7',
            borderRadius: 4,
            marginBottom: 24,
            border: 0,
            overflow: 'hidden',
        };
        return (

            <div>
                <Form style={{margin: 'auto', marginTop: 20}} className="container">
                    <Collapse bordered={false}>
                        <Panel header="查询" style={customPanelStyle}>
                            <Row style={{paddingTop: 30}}>
                                <Col {...layout}>
                                    <Form.Item
                                        label="姓名"
                                        labelCol={{span: 10}}
                                        wrapperCol={{span: 14}}
                                    >
                                        {getFieldDecorator('name', {
                                                initialValue: ''
                                            }
                                        )(
                                            <Input style={{width: 140}}/>
                                        )}
                                    </Form.Item>
                                    <Form.Item
                                        label="学号"
                                        labelCol={{span: 10}}
                                        wrapperCol={{span: 14}}
                                    >
                                        {getFieldDecorator('acNo', {
                                                initialValue: ''
                                            }
                                        )(
                                            <Input style={{width: 140}}/>
                                        )}
                                    </Form.Item>
                                    <Form.Item
                                        label="级别"
                                        labelCol={{span: 10}}
                                        wrapperCol={{span: 14}}
                                    >
                                        {getFieldDecorator('classLevel', {
                                                initialValue: ''
                                            }
                                        )(
                                            <Input style={{width: 140}}/>
                                        )}
                                    </Form.Item>
                                </Col>
                                <Col {...layout}
                                     style={{float: 'right', textAlign: 'end', marginRight: '2%', marginBottom: 20}}>
                                    <Button type="primary" onClick={() => {
                                        this.handleSubmit()
                                    }} style={{width: 118}}>查询</Button>
                                </Col>
                            </Row>
                        </Panel>
                    </Collapse>
                </Form>
                <Button className="addBtn" onClick={this.showAddModal} type="primary" ghost>学籍注册</Button>
                <Button className="addBtn" onClick="#" type="primary" ghost><a href="http://localhost:8080/student/export">学籍导出</a></Button>
                <TableDetail visible={detail} currentData={currentData} handleCancel={this.onDetailCancel} />
                <Modal title="学籍添加" visible={this.state.visible}
                       onOk={this.handleOk} onCancel={this.handleCancel}

                >
                    <Form>
                        <Row>
                            <Col span={12}>
                                <Form.Item
                                    label="学号"
                                    labelCol={{span: 10}}
                                    wrapperCol={{span: 14}}
                                >
                                    {getFieldDecorator('acNo', {
                                            rules: [{
                                                required: true, message: '请输入学号!',
                                            }],
                                        }
                                    )(
                                        <Input style={{width: 140}}/>
                                    )}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="姓名"
                                    labelCol={{span: 10}}
                                    wrapperCol={{span: 14}}
                                >
                                    {getFieldDecorator('name', {
                                            rules: [{
                                                required: true, message: '请输入姓名!',
                                            }],
                                        }
                                    )(
                                        <Input style={{width: 140}}/>
                                    )}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="性别"
                                    labelCol={{span: 10}}
                                    wrapperCol={{span: 14}}
                                >
                                    {getFieldDecorator('sex', {
                                            rules: [{
                                                required: true, message: '请选择性别!',
                                            }],
                                        }
                                    )(
                                        <Select style={{with: 140}}>
                                            <Option value="1">男</Option>
                                            <Option value="0">女</Option>
                                        </Select>
                                    )}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="班级"
                                    labelCol={{span: 10}}
                                    wrapperCol={{span: 14}}
                                >
                                    {getFieldDecorator('className', {
                                            rules: [{
                                                required: true, message: '请输入班级!',
                                            }],
                                        }
                                    )(
                                        <Input style={{width: 140}}/>
                                    )}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="身份证号"
                                    labelCol={{span: 10}}
                                    wrapperCol={{span: 14}}
                                >
                                    {getFieldDecorator('cardId', {
                                            rules: [{
                                                required: true, message: '请输入身份证号!',
                                            }],
                                        }
                                    )(
                                        <Input style={{width: 140}}/>
                                    )}
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="级别"
                                    labelCol={{span: 10}}
                                    wrapperCol={{span: 14}}
                                >
                                    {getFieldDecorator('classLevel', {
                                            rules: [{
                                                required: true, message: '请输入级别!',
                                            }],
                                        }
                                    )(
                                        <Input style={{width: 140}}/>
                                    )}
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
                <ManagerBody columns={this.columns}
                             dataSource={tcdListData}
                             bordered={true}
                             pageNum={this.state.pageNum}
                             pageSize={this.state.pageSize}
                             total={this.state.total}
                             changeSize={(v) => {
                                 this.setState({pageSize: v})
                             }}
                             changePage={(v) => {
                                 this.setState({pageNum: v})
                             }}
                             serachData={this.serachData}
                ></ManagerBody>
            </div>
        );
    }
}